<template>
    <div class="reply-message">
        <div class="reply-list" v-if="Array.isArray(replyList)">
            <div
                class="reply"
                :class="{ 'no-border': replyCount <= 5 && index === replyList.length - 1 }"
                @click="debounceReplyClick(item.id)"
                v-for="(item, index) in replyList"
                :key="item.id"
            >
                <div>{{ index + 1 }}. {{ item.title }}</div>
                <img src="@/assets/arrow.png" class="img" alt="" />
            </div>

            <div class="refresh" v-if="replyCount > 5">
                <el-button link @click="refresh" :disabled="state.loading">
                    <el-icon class="icon" :class="{ 'is-loading': state.loading }"
                        ><Refresh />
                    </el-icon>
                    Choose Other
                </el-button>
            </div>
        </div>

        <div v-else class="text-box">
            <div class="text">
                {{ replyList }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { Refresh } from '@element-plus/icons-vue'
import { computed, reactive, inject } from 'vue'
import { debounce } from '@/utils/index.js' // 导入防抖函数

const props = defineProps({
    message: {
        type: Object,
        required: true,
    },
})

const emits = defineEmits(['replyClick', 'refresh'])

const replyData = inject('reply')

const state = reactive({
    loading: false,
})

const replyList = computed(() => {
    return replyData().reply.value[props.message.id]
})

const replyCount = computed(() => {
    return replyData().replyCount.value[props.message.id]
})

const refresh = async () => {
    const msgId = props.message.id
    const categoryId = props.message.categoryId
    const query = props.message.query
    emits('refresh', { msgId, id: categoryId, query })
}

const replyClick = (id) => {
    const data = replyList.value.find((e) => e.id === id)
    emits('replyClick', data)
}

const debounceReplyClick = debounce(replyClick, 300, true)
</script>

<style lang="scss" scoped>
.reply-message {
    color: #000000;
    font-size: 14px;

    .text-box {
        display: flex;
        .text {
            background: #fff;
            padding: 12px;
        }
    }

    .reply-list {
        width: 434px;
        background: #fff;
        border-radius: 4px;
        padding: 0 12px;
        box-sizing: border-box;

        .reply {
            width: 100%;
            border-bottom: 1px solid #e4e4e4;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            cursor: pointer;
            line-height: 24px;

            .img {
                width: 14px;
                height: 14px;
            }
        }
        .no-border {
            border-bottom: none;
        }
        .refresh {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 12px 0;
            .icon {
                font-size: 16px;
                margin-right: 6px;
            }
            :deep(.el-button) {
                color: #ff8217;
            }
        }
    }
}
</style>
